html, body {
	margin: 0;
	height: 100%;
	font-family: "Arial", sans-serif;
	font-size: 14px;
	overflow: hidden;
}

* {
	box-sizing: border-box;
}

@padding: 5px;
@blueColor: #215adc;

.formula-bar {

	padding: @padding;
	padding-top: 0;

	input{
		width: 100%;
		padding: @padding
	}
}


body {
	
	display: flex;
	flex-direction: column;

	header {
		background:#eee;
		width: 100%;
		z-index: 1;
		user-select: none;
		position: relative;

		.save-status {
			font-size: 13px;
			font-style: italic;
			color: #888;
			padding-left: 10px;
		}

		.workspaceName{
			position: absolute;
			width: 30%;
			left: 50%;
			margin-left: -15%;
			top: 6px;

			input{
				width: 100%;
				text-align: center;
				border:0;
				background:0;
				font-size: 14px;
			}
			
		}
  
		div-menu{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
			padding: 0;
		}

		a {
			color: #000;
			text-decoration: none;
		}
		 
		menu-item{
			cursor: pointer;
			padding:7px 12px;
			
			a {
				color: inherit;
			}

			input{
				position: absolute;
				opacity: 0; 
				pointer-events: none;
			}

			&:hover {
				background: #333;
				color: #fff;
				menu-list {
					display: block;
				}
			}
		}

		menu-list{
			position: absolute;
			display: none;
			margin-top: 7px;
			margin-left: -12px;
			background: #eee;
			font-size: 14px;

			color: #000;

			menu-item{
				display: block;
				color
				&:hover{
					background:#333;
					color:#fff;
				}
				&.no-plots{
					font-style: italic;
				}
			}
		}
	}
	div-sheet {
		width: 100%;
		overflow-y: scroll;
		overflow-x: scroll;
		flex: 1;

		.sheet-sizer {
			user-select: none;
		}

		canvas{
			position: fixed;
			z-index: -1;
			height: auto;
		}
	}
}

.plotly-notifier{
	font-family: "Open Sans", sans-serif !important;
}

.view.plots {

	.plot-holder {
		img {
			display: none;
			&.active {
				display: block;
			}
		}
	}

	.plot-navigator {
		position: absolute;
		left: 10px;
		top: 10px;

		.plot-left, .plot-right {
			display: block;
			float: left;
			width: 20px;
			height: 20px;
			background: url('image/icon-arrow.svg');
			background-size: contain;
			cursor: pointer;

			&.disabled {
				opacity: 0.2;
			}
		}
		.plot-left {
			transform: rotate(180deg);
		}
		.plot-counter {
			text-align: center;
			padding: 2px 1px;
			float: left;
		}
	}

}

.left-panel {
	display: flex;
	flex-direction: column;
	position: absolute;
	height:100%;
	width: 61.8%;

	.progress-indicator {
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: 100px;
		border-radius: 50px;
		height: 10px;
		overflow: hidden;

		.progress-indicator-inner {
			background: @blueColor;
			display: block;
			height: 100%;
			width: 0;
		}
	}

	.sheet-tabs {
		height: 30px;
		border-top: 1px solid #aaa;
		
		.add-sheet {
			height: 31px;
			margin-top:-1px;
			padding: 7px;
			float: left;
			padding-top: 8px;
			cursor: pointer;

			&:hover {
				background: #333;
				img {
					filter: invert(100%);
				}
			}
		}
	}

	.sheet-tabs-holder {
		height: 31px;
		margin-top: -1px;
		float: left;
		user-select: none;

		.sheet-tab {
			display: flex;
			float: left;
			height: 100%;
			justify-content: center;
			align-items: center;
			padding: 0 10px;
			font-size: 13px;
			cursor: pointer;

			&.active, &:hover {
				background: #333;
				color:#fff;
			}
		}
	}
}

.context-menu {
	position: absolute;
	background: #fff;
	box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	display: none;
	z-index: 9999;
	font-size: 12px;

	.context-menu-item {
		position: relative;
		padding: 8px;
		cursor: pointer;

		&:hover {

			&.dropdown {
				.context-menu-submenu {
					display: block;
				}
			}

			background: rgba(50, 110, 255, 0.1);
		}
		&.dropdown {
			padding-right: 50px;
			
			&:after {
				position: absolute;
				display: block;
				content: " ";
				height: 12px;
				width: 12px;
				right: 5px;
				top: 10px;
				opacity: 0.3;
				background-image: url('image/icon-arrow.svg');
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
	}

	.context-menu-submenu { 
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		background: #fff;
		transform: translateX(100%);
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	}

	&.shown{
		display: block;
	}
}

.main-body{
	position: relative;
	height: 100%;
	
	.plot {
		position: absolute;
		user-select: none;
		-moz-user-select: none;
		padding: 10px;
		background: #fff;
		z-index: 9999;

		box-shadow: 0px 0px 23px rgba(0,0,0,0.2);

		&.animate{
			transition: 0.3s all;
		}

		.resizer{
			width: 30px;
			height: 30px;
			position: absolute;
			z-index: 9;
			right: 0;
			bottom: 0;
			background: url('image/resize.png');
			background-position: 66.6% 66.6%;
			background-size: 10px 10px;
			background-repeat: no-repeat;
			cursor: se-resize;
		}

		.plot-header{
			background:#fff;
			.close{
				position: absolute;
				left: 20px;
				top: 14px;
				z-index: 9;
				padding:0px;
				cursor: pointer;
			}

			.minimize{
				position: absolute;
				left: 50px;
				top: 8px;
				z-index: 9;
				padding:0px;
				cursor: pointer;
			}
			
			.save-svg{
				position: absolute;
				left: 80px;
				top: 13px;
				z-index: 9;
				padding:0px;
				cursor: pointer;
			}
		}
	}
}

.full-plot{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.95);
	display: flex;
	align-items: center;
	z-index: 9999;
	justify-content: center;
	cursor: pointer;

	img {
		width: 70vw;
		height: 70vh;
		object-fit: contain;	
	}
}

.code-editor{
	width: 38.2%;
	right: 0;
	height: 100%;
	position: absolute;
	top: 0;
	box-sizing: border-box;
	border-left: 1px solid #bbb;
	overflow: hidden;

	.computing-indicator{
		width: 26px;
		height: 26px;
		background: #717171;
		background-image: url("image/loading.gif");
		background-size: 100%;
		margin: 10px;
	}

	.run-code-button {
		width: 31px;
		height: 31px;
		cursor: pointer;
		background-image: url("image/playicon.svg");
		background-size: contain;
		margin: 7px;
	}

	.editor-action-holder {
		position: absolute;
		bottom: 0;
		width: 46px;
		height: 46px;
		z-index: 99;
		margin: 0px;
	}
	
	.dev-tabs{
		position: absolute;
		width: 100%;
		height: 30%;
		background: #fff;
		color: #000;
		bottom :0;
		border-top: 1px solid #bbb;
		z-index: 999;

		.filemanager {
			height: 100%;
			display: flex;
			flex-direction: column;

			.files-view{
				overflow-y: auto;
				flex: 1;
			}

			.path{
				background: #eee;
				padding: 4px;
				display: flex;

				.files-home{
					display: inline-block;
					width: 27px;
					padding: 4px;
					padding-left: 0;

					opacity: 0.35;
					&:hover {
						opacity: 1;
					}
					
					cursor: pointer;
					
					img {
						width: 100%;
						
					}
				}
				input{
					flex: 1;
					padding: 4px;
				}
			}
			
			.icon {
				display: block;
				margin-right: 5px;
				background-size: contain;
				background-repeat: no-repeat;
				width: 26px;
				height: 26px;
				float: left;
				margin-top: -4px;
			}

			li.directory {
				.icon {
					background-size: 18px;
					background-position: center;
				}
			}

			li{
				overflow: auto;
				list-style: none;
				&:hover {
					background: #eee;
				}
				padding: 3px;
				padding-top: 6px;
			}
		}

		.plots {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 100%;
			
			img{
				width: 100%;
				height: 100%;
				object-fit: contain;
				overflow: hidden;
				cursor: pointer;
			}
		}

		.terminal, .console {
			height: 100%;
		}

		.terminal{
			background: #000;
			padding: 5px;
		}

		.tabs{
			margin-top: -46px;
			right: 0;
			background: #eee;
			position: absolute;
			.tab{
				padding: 15px;
				padding-bottom: 14px;
				float: left;
				cursor: pointer;
				user-select: none;

				transition: background-color 0.2s ease;
				&:hover, &.current{
					background: #ddd;
				}
			}
		}

		.console{
			overflow-y: auto;

			padding: 10px;
			.message{
				padding-left: 15px;
				position: relative;
				
				font-family: monospace;
				white-space: pre-wrap;
	
				&.error {
					color: orange;
				}

				&:before{
					position: absolute;
					content: '# ';
					color: #999;
					margin-left: -13px;
				}
			}
		}
		
	}
	
	
}


.file-editor {
	position: absolute;
	width: 100%;
	height: 70%;
	padding-bottom: 45px;
	background: #eee;

	.file-name-holder {
		padding: 5px;
		height: 26px;

		.close{
			position: absolute;
			right: 5px;
			top: 5px;
			cursor: pointer;
		}

		.file-name.unsaved {
			&:after{
				content: "*";
			}
		}
	}

	#editor-ace {
		background: #fff;
		height: calc(~"100% - 26px");
		width:100%;
		border-bottom: 1px solid #ccc;
	}

	
}

input:focus{
	outline: none;
}
input.input-field{
	position: fixed;
	border: 1px solid royalblue;
	padding-left: 1px; // compensate for left border
	background: #fff;
	z-index: 9;
}